@screen-sm-min: 600px;
@screen-md-min: 1024px;
@screen-lg-min: 1440px;
@screen-xl-min: 1920px;


.row-xl(@index, @name) when (@index >0) {
  @media (min-width: @screen-xl-min) {
    &-xl-@{index} {
      @{name}-col {
        width: 100%/@index  !important;
      }
    }
  }

  .row-xl(@index - 1, @name);
}

.row-lg(@index, @name) when (@index >0) {
  @media (min-width: @screen-lg-min) {
    &-lg-@{index} {
      @{name}-col {
        width: 100%/@index  !important;
      }
    }
  }

  .row-lg(@index - 1, @name);
}

.row-sm(@index, @name) when (@index >0) {
  @media (min-width: @screen-sm-min) {
    &-sm-@{index} {
      @{name}-col {
        width: 100%/@index  !important;
      }
    }
  }

  .row-sm(@index - 1, @name);
}

.row-md(@index, @name) when (@index >0) {
  @media (min-width: @screen-md-min) {
    &-md-@{index} {
      @{name}-col {
        width: 100%/@index  !important;
      }
    }
  }

  .row-md(@index - 1, @name);
}

.row-xs(@index, @name) when (@index >0) {
  &-xs-@{index} {
    @{name}-col {
      width: 100%/@index  !important;
    }
  }

  .row-xs(@index - 1, @name);
}
